<template>
  <div class="main-con flex1 vbox">
    <div class="search-con">
      <el-form :model="searchParam" :inline="true">
        <el-form-item prop="roleName">
          <el-input
            v-model.trim="searchParam.roleName"
            @keyup.enter.native="search"
            placeholder="输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="vbox flex1">
      <div class="toolbar">
        <el-button type="primary" v-auth="'add'" plain icon="el-icon-plus" @click="showDialog">添加角色</el-button>
      </div>
      <base-table
        ref="roleTable"
        url="role/page"
        :cls="columns"
        :optionBtns="optionBtns"
        @handlerOption="handlerOption"
      ></base-table>
    </div>
    <el-dialog
      custom-class="custom-dialog-class"
      center
      title="角色管理"
      :visible.sync="showRoleDialog"
      :width="'45%'"
      top="3%"
    >
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form ref="roleForm" :model="role" :rules="rules" label-width="90px">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model.trim="role.roleName" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="remark">
              <el-input v-model.trim="role.remark" placeholder="请输入角色描述"></el-input>
            </el-form-item>
            <el-form-item label="是否可操作" prop="editabled">
              <el-radio-group v-model="role.editabled">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="16">
          <res-tree ref="resTree" :showCheckbox="true" @check="onCheck"></res-tree>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveRole">保 存</el-button>
        <el-button @click="showRoleDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showRoleDialog: false,
      searchParam: {
        roleName: ""
      },
      role: {
        id: "",
        roleName: "",
        remark: "",
        editabled: 1
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ]
      },
      columns: [
        { prop: "id", label: "编号", width: 100 },
        { prop: "roleName", label: "角色名称", width: 120 },
        { prop: "remark", label: "角色描述", width: 180 },
        {
          prop: "editabled",
          label: "是否可操作",
          formatter(record) {
            return record.editabled == 0 ? "否" : "是";
          }
        },
        { prop: "crteTime", label: "创建时间" }
      ],
      optionBtns: [
        { text: "编辑", code: "list_edit", type: "primary" },
        { text: "删除", code: "list_delete" }
      ],
      checkedKeys: [],
      expandKeys: []
    };
  },
  methods: {
    handlerOption(code, row) {
      if (code == "list_edit") {
        this.eidtRole(row);
      } else if (code == "list_delete") {
        this.delRole(row);
      }
    },
    showDialog() {
      this.showRoleDialog = true;
      this.$nextTick(() => {
        this.$refs["roleForm"].resetFields();
        this.$refs["resTree"].setCheckedKeys([]);
        this.role = {
          id: "",
          roleName: "",
          remark: "",
          editabled: 1,
          resInfo: []
        };
      });
    },
    eidtRole(row) {
      let me = this;
      let tempData = Object.assign({}, row);
      me.role = tempData;
      me.getResByRoleId(row.id);
      me.showRoleDialog = true;
    },
    delRole(row) {
      let me = this;
      me.$confirm("确定要删除选中行数据吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        me.$http.ajax({
          url: "role/delete",
          data: {
            ids: [row.id]
          },
          success: res => {
            me.$message.success("删除成功");
            me.search();
          }
        });
      });
    },
    search() {
      this.$refs["roleTable"].initLoad();
    },
    saveRole() {
      let me = this;
      me.$refs["roleForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "role/saveRoleRes",
            data: me.role,
            success: res => {
              me.$message.success("保存成功");
              me.showRoleDialog = false;
              me.search();
            }
          });
        }
      });
    },
    getResByRoleId(roleId) {
      let me = this;
      me.$http.ajax({
        url: "role/getResByRoleId/" + roleId,
        success: res => {
          if (res && res.length > 0) {
            me.initCheckedKeys(res);
            let ids = [];
            let expandKeys = [];
            res.forEach(item => {
              if (item.leaf == 1) {
                ids.push(item.resId);
              } else if (item.leaf == 0) {
                expandKeys.push(item.resId);
              }
            });
            me.checkedKeys = ids;
            me.$refs["resTree"].setCheckedKeys(me.checkedKeys);
          }
        }
      });
    },
    onCheck(
      data,
      { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
    ) {
      let resInfo = [];
      checkedKeys.forEach(item => {
        resInfo.push({
          resId: item,
          leaf: 1
        });
      });
      halfCheckedKeys.forEach(item => {
        resInfo.push({
          resId: item,
          leaf: 0
        });
      });
      this.role.resInfo = resInfo;
    },
    initCheckedKeys(keys) {
      let resInfo = [];
      keys.forEach(item => {
        resInfo.push({
          resId: item.resId,
          leaf: item.leaf
        });
      });
      this.role.resInfo = resInfo;
    }
  }
};
</script>

<style>
</style>
